﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>账户信息总览页面</title>
    <th:block th:insert="~{front/include::head}"></th:block>
    <link rel="stylesheet" th:href="@{/assets/front/css/account.css}">
</head>

<body>
<header th:replace="~{front/include2::header}"></header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span></span> 账户
            </div>
        </div>
    </div>
    <section class="pt-150 pb-150">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 m-auto">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="dashboard-menu">
                                <ul class="nav flex-column" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="dashboard-tab" data-bs-toggle="tab"
                                           href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="false"><i
                                                class="fi-rs-settings-sliders mr-10"></i>账号信息总览</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="orders-tab" data-bs-toggle="tab" href="#orders"
                                           role="tab" aria-controls="orders" aria-selected="false"><i
                                                class="fi-rs-shopping-cart-check mr-10"></i>订单</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="address-tab" data-bs-toggle="tab" href="#address"
                                           role="tab" aria-controls="address" aria-selected="true"><i
                                                class="fi-rs-marker mr-10"></i>收货信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="account-detail-tab" data-bs-toggle="tab"
                                           href="#account-detail" role="tab" aria-controls="account-detail"
                                           aria-selected="true"><i class="fi-rs-user mr-10"></i>账号详情</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" th:href="@{/vm/front/logout}"><i
                                                class="fi-rs-sign-out mr-10"></i>退出登录</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="tab-content dashboard-content">
                                <div class="tab-pane fade active show" id="dashboard" role="tabpanel"
                                     aria-labelledby="dashboard-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="mb-0" th:text="'你好,'+${member.name}"></h5>
                                        </div>
                                        <div class="card-body">
                                            <p>在您的账户信息总览中，您可以轻松查看您的 ·近期订单，管理您的
                                                ·收货信息，以及 ·编辑您的密码和账户信息。
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
                                    <div class="card" style="width: 812px">
                                        <div class="card-header" style="width: 810px">
                                            <h5 class="mb-0">你的订单</h5>
                                        </div>
                                        <div class="card-body" style="width: 800px">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>订单</th>
                                                        <th>日期</th>
                                                        <th>收货人</th>
                                                        <th>状态</th>
                                                        <th>总计</th>
                                                        <th colspan="3">操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <th:block th:each="o:${orders}">
                                                        <tr th:data-order-id="${o.id}">
                                                            <td th:text="'#'+${o.orderNo}">#1</td>
                                                            <td th:text="${o.createdTime}"/>
                                                            <td th:text="${o.receiverName}"/>
                                                            <td th:text="${o.state}"/>
                                                            <td th:text="${o.orderItems.size()}+'个订单项总计$'+${o.totalPay}"></td>
                                                            <td><a class="detail_btn btn-small d-block">查看</a></td>
                                                            <td><a class="receive_btn btn-small d-block">收货</a></td>
                                                            <td><a class="refunding_btn btn-small d-block">退款</a></td>
                                                        </tr>
                                                        <tr class="order_detail" style="display: none">
                                                            <td colspan="6">
                                                                <table class="table">
                                                                    <thead>
                                                                    <tr>
                                                                        <th>序号</th>
                                                                        <th>商品图</th>
                                                                        <th>商品名</th>
                                                                        <th>商品成交价</th>
                                                                        <th>数量</th>
                                                                        <th>总价</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr th:each="oi,stat:${o.orderItems}">
                                                                        <td th:text="${stat.count}"></td>
                                                                        <td>
                                                                            <img class="pic"
                                                                                 th:if="${oi.goodsPic!=null&&oi.goodsPic!=''}"
                                                                                 th:src="@{/assets/{pic}(pic=${oi.goodsPic})}"/>
                                                                        </td>
                                                                        <td th:text="${oi.goodsName}"></td>
                                                                        <td th:text="'$'+${oi.dealPrice}"></td>
                                                                        <td th:text="${oi.quantity}"></td>
                                                                        <td th:text="'$'+${oi.dealPrice*oi.quantity}"></td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </th:block>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h5 class="mb-0">收货信息</h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="table-responsive">
                                                        <table class="table receiver_info">
                                                            <thead>
                                                            <tr>
                                                                <th>收货人姓名</th>
                                                                <th>收货人电话</th>
                                                                <th>收货地址</th>
                                                                <th>操作</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr th:each="ma:${mas}" th:data-ma-id="${ma.id}">
                                                                <td th:text="${ma.name}"></td>
                                                                <td th:text="${ma.phone}"></td>
                                                                <td th:text="${ma.streetAddress.fullName+ma.detail}"></td>
                                                                <td><a class="addr_del_btn btn-small d-block">删除</a>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                        <a id="addr_add_btn" class="btn-small">新增</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="account-detail" role="tabpanel"
                                     aria-labelledby="account-detail-tab">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>账号详情</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="edit-form" name="enq">
                                                <input name="id" type="hidden" th:value="${member.id}"/>
                                                <div class="row">
                                                    <div class="form-group col-md-6">
                                                        <label>账号</label>
                                                        <input th:value="${member.account}"
                                                               disabled class="form-control square">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label>身份证号</label>
                                                        <input th:value="${member.cardId}"
                                                               disabled class="form-control square"
                                                               type="cardId">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label>头像</label>
                                                        <div class="layui-input-block" style="margin-left: 20px">
                                                            <img class="avatar"
                                                                 th:src="@{/assets/{pic}(pic=${member.avatar})}">
                                                            <button type="button" class="layui-btn"
                                                                    id="avatar-upload-btn">
                                                                <i class="layui-icon layui-icon-upload"></i>图片上传
                                                            </button>
                                                        </div>

                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label>姓名</label>
                                                        <input th:value="${member.name}" name="name"
                                                               lay-verify="required" lay-reqtext="姓名不可为空"
                                                               class="form-control square"
                                                               type="text">
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <label>电话</label>
                                                        <input th:value="${member.phone}"
                                                               lay-verify="required||phone" lay-reqtext="电话规格不正确"
                                                               class="form-control square" name="phone"
                                                               type="text">
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>邮箱</label>
                                                        <input th:value="${member.email}"
                                                               lay-verify="email" lay-reqtext="邮箱规格不正确"
                                                               class="form-control square" name="email"
                                                               type="email">
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <label>新密码</label>
                                                        <input class="form-control square" autocomplete="off"
                                                               name="password" type="password">
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label>确认密码 </label>
                                                        <input class="form-control square" autocomplete="off"
                                                               name="cpassword" type="password"
                                                               lay-verify="cpassword" lay-reqtext="确认密码不正确">
                                                    </div>
                                                    <div class="col-md-12">
                                                        <button type="button" class="btn btn-fill-out"
                                                                name="account_info_btn">保存新的个人信息
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!--脚部-->
<footer th:replace="~{front/include::footer}"></footer>
<!--js-->
<div th:insert="~{front/include::scripts}"></div>
<script th:src="@{/assets/front/js/account/account.js}"></script>
</body>

</html>